<div class="row-fluid">
<div class="span10">
<table width="100%" class="table-condenesed">

<header><?= $tasks['title']; ?></header>
  <tr >
    <td colspan="2" valign="bottom">
    <small class="muted" id="completed"></small>
    <div class="progress progress-info progress-striped">
      <div class="bar" style="width:0%"></div>
  </div></td>
  <?php if(empty($subtasks)) {?>
    <td width="12%"><button type="button" class="btn" id="achieved" >Achieved</button>
  </td>
  <?php }?>
    <td width="11%"><a href="#" class="btn" id="closed">Close</a></td>
  </tr>
  <tr>
    <td width="49%" height="37"><strong>Final Due Date :</strong>  <?=$tasks['end_date'];?></td>
    <td width="28%">&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><strong>Task Description</strong></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="4"><?= $tasks['desc']?></td>
    </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>

</table>
<h5>Subtasks <span class="badge badge-info" id="subtask"><?=count($subtasks)?></span></h5>
<table width="100%" class="table table-hover">
<?php
if(empty($subtasks))
{?>
<tr>
<td colspan="4">No Subtask has been added <a href="#myModal" role="button" data-toggle="modal">add new</a></td>
</tr>
<?php }
else {
?>
<?php foreach($subtasks as $subtask){?>
<tr>
<td width="3%">
<input type="hidden" value="<?=$subtask->id?>" id="subtask_id<?=$subtask->id?>" />
<a href="#" title="edit - <?= $subtask->desc?>"><i class="icon-edit"></i></a></td>
<td><?= $subtask->desc?></td>
<td width="15%"><a id="<?= $subtask->id?>" onclick="achieve(this.id)" style="cursor:pointer" >Achieved</a></td>
<td width="3%"><a href="<?=site_url('user/tasks/delete_subtask/'.$tasks['id'].'/'.$subtask->id)?>" title="delete - <?= $subtask->desc?>"><i class="icon-trash"></i></a></td>
</tr>
<?php }}?>
</table>
<br />
<br />

<div class="well">
<h5>Add Note to this Task</h5>
<small>You might enter a note about a call, or a meeting, or a conversation you just had with this person. Notes are great for keeping a history of your interactions or communications with someone.</small>
<br />
<br />
<?=form_open('user/tasks/task_detail/'.$tasks['id'],array('id'=>'form'))?>
<label>
<textarea rows="5" class="span12" name="note" id="note"></textarea>
<span class="text-error"><?=form_error('note')?></span>
</label>
<input type="hidden" value="<?=$task_id?>" name="task_id" id="task_id" />
<br />
<input type="button" value="Add Note" class="pull-right"  id="submit_note" />
</form>
</div>
<!--<div class="alert"><?= $this->session->flashdata('note_message') ?></div>-->

<div>
<?php if(empty($notes)) {?>
<small >No Notes Till Now</small>
<?php } else {?>
<table width="100%" class="">
<?php foreach($notes as $note) {?>
  <tr>
    <td width="10%" rowspan="3" valign="top"><img class="img-polaroid" src="<?= $this->config->base_url(); ?>assets/images/users.png" /></td>
    <td width="90%"><strong>Note by</strong> : <?= $note->username;?></td>
  </tr>
  <tr>
    <td class="muted">on <?= $note->date?></td>
  </tr>
  <tr>
    <td><?= $note->note?></td>
  </tr>
  <tr>
  <td>&nbsp;</td>
  </tr>
<?php } ?>
</table>
<?php }?>
</div>
</div>
<div class="span2">
<header>Actions</header>
<a href="#myModal" role="button" data-toggle="modal">Add New Sub Taks</a>
<br />

<a href="<?= site_url('user/tasks/edit').'/'.$tasks['id']?>">Edit this Task</a>
</div>
</div>

<!-- Sub tasks -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <?= form_open('user/tasks/create_subtask/'.$tasks['id'])?>
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Add New Sub Task</h3>
  </div>
  <div class="modal-body">
    <p>
   
    <textarea placeholder="Add New Sub Task" class="span12" name="subtask"></textarea>
    
    </p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-info" type="submit">Save changes</button>
    </form>
  </div>
</div>


<script type="text/javascript">
$(document).ready(function(e) {
   //$('#completed').html("0% Completed");
   var task_id = $('#task_id').val();	
	$.post('<?= site_url('user/tasks/check_is_achieved');?>',{taskid : task_id }, function(data) {
	// alert(data)
	 if(data == 1)
	 {
	$('.bar').css('width','100%');
	$('#completed').html("100% Completed");
	$('#achieved').addClass('btn-success')
	$('#achieved').html('Unachieved'); 	 
	 }
	 else { $('#completed').html("0% Completed");} 
});

$.post('<?= site_url('user/tasks/check_is_completed');?>',{taskid : task_id }, function(msg) {
	// alert(msg)
	 if(msg == 1)
	 {
	$('.bar').css('width','100%');
	$('#completed').html("100% Completed");
	$('#closed').addClass('btn-success')
	$('#closed').html('Open');
	$('#achieved').hide();	 
	 }
	 else { $('#completed').html("0% Completed");} 
});

//check subtask is achieved or not 
var subtasks = $('#subtask').html();
var comnpleted_percentage =  Math.round(100 / subtasks) ;
//alert(comnpleted_percentage);
var completed_value = 0;
var checkcompleted;
<?php foreach ($subtasks as $subt) {?>
var subtask_id = $('#subtask_id<?= $subt->id?>').val()
//alert(subtask_id)
$.post('<?= site_url('user/tasks/check_subtask_is_achieved');?>',{subtask_id  : subtask_id }, function(subtask_msg) {
	// alert(subtask_msg)	 
	 if(subtask_msg==1)
	 {				 	
	completed_value = parseInt(comnpleted_percentage) +parseInt( completed_value);	
	//alert(completed_value);
		$('#<?= $subt->id?>').html('Not Achieved');
		$('#<?= $subt->id?>').addClass('text-success')
		$('#<?= $subt->id?>').css('font-weight','bold');
		$('.bar').css('width',completed_value+'%');
		$('#completed').html(completed_value+"% Completed");		
		checkcompleted = 0;
		//alert(checkcompleted)
	 }
	 else {
		 checkcompleted = 1;
		// alert(checkcompleted)
	 }
	 //alert(checkcompleted)
if(checkcompleted == 0)
{
/*$('.bar').css('width','100%');
	$('#completed').html("100% Completed");
*/}
else{
	exit;
	//break;
}
	

	//alert(checkcompleted)
	
});
<?php }?>
/* if(checkcompleted == 0)
	 {
	$('.bar').css('width','100%');
	$('#completed').html("100% Completed");
	$.post('<?= site_url('user/tasks/task_achieved');?>',{taskid : task_id }, function(data) {
	// alert(data)
	$('.bar').css('width','100%');
	$('#completed').html("100% Completed");
	$('#achieved').addClass('btn-success')
	$('#achieved').html('Unachieved');	
	}); */
	// }	
});
// doucment ready function ends here


$('#submit_note').click(function () {	
	if(!$('#note').val())
	{
	alert('Note Feild is Required');	
	}
	else {
	var notes = $('#note').val();
	var task_id = $('#task_id').val();	
	$.post('<?= site_url('user/tasks/add_note');?>',{note : notes , taskid : task_id }, function(data) {
	// alert(data)
	 $('#note').val("");
	  location.reload(); 
	 });
	}
	
	})

//Is Achieved
	
$('#achieved').click(function () {
	var task_id = $('#task_id').val();
	var check = $('#achieved').html();
	if( check == 'Unachieved' )
	{
	$.post('<?= site_url('user/tasks/task_unachieved');?>',{taskid : task_id }, function(data) {
	// alert(data)
	$('.bar').css('width','0%');
	$('#completed').html("0% Completed");
	$('#achieved').addClass('btn-primary')
	$('#achieved').html('Achieved');	
	});
	}
	//alert($('#achieved').html())
	else{	
	$.post('<?= site_url('user/tasks/task_achieved');?>',{taskid : task_id }, function(data) {
	// alert(data)
	$('.bar').css('width','100%');
	$('#completed').html("100% Completed");
	$('#achieved').addClass('btn-success')
	$('#achieved').html('Unachieved');	
	});
	}
})

$('#closed').click(function () {		
	var task_id = $('#task_id').val();
	var check = $('#closed').html();
	//alert(check);
	if( check == 'Open' )
	{
		//alert(check);
	$.post('<?= site_url('user/tasks/task_open');?>',{taskid : task_id }, function(data) {
	// alert(data)
	$('.bar').css('width','0%');
	$('#completed').html("0% Completed");
	$('#closed').addClass('btn-success')
	$('#closed').html('Close');	
	$('#achieved').show();
	});
	}
	else {
	$.post('<?= site_url('user/tasks/task_closed');?>',{taskid : task_id }, function(data) {
	// alert(data)
	$('.bar').css('width','100%');
	$('#completed').html("100% Completed");
	$('#closed').addClass('btn-success')
	$('#closed').html('Open');
	$('#achieved').hide(500); 
	});
	}
})
	
	function achieve(str)
	{
		var task_id = $('#task_id').val();
		var subtask_id = str;
		var subtasks = $('#subtask').html();
		var comnpleted_percentage =  parseInt(100 / subtasks) ;
		//alert(str);
		var id = "#"+str;
		if($(id).html() =='Not Achieved'){
		$.post('<?= site_url('user/tasks/subtask_unachieved');?>',{subtask_id : subtask_id }, function(data) {		
				location.reload();
});	
	}
	else {
$.post('<?= site_url('user/tasks/subtask_achieved');?>',{subtask_id : subtask_id }, function(data) {		
			location.reload();
});
	}
		}
</script>